<template>
  <div>
    <HomeHeader></HomeHeader>
    <van-tabs v-model="activeCateIndex" sticky>
      <van-tab v-for="category in cateList" :key="category.id" :title="category.name">
        <!-- 无限加载 -->
        <van-list
          @load="loadMorePost"
          :immediate-check="false"
          v-model="category.loading"
          :finished="category.finished"
          finished-text="后面没有啦"
        >
          <PostItem v-for="item in category.postList" :key="item.id" :postData="item"></PostItem>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeHeader from "../components/homeHeader";
import PostItem from "../components/postItem";
export default {
  data() {
    return {
      activeCateIndex: 1,
      cateList: [],
    };
  },
  components: {
    HomeHeader,
    PostItem,
  },
  created() {
    // 现在有了栏目管理页面
    // 有可能在本地储存当中有激活栏目数据
    // 如果有, 那么就不应该从远程获取栏目
    if (localStorage.getItem("delList")) {
      // 本地储存的激活列表就是我的分类数据来源
      const category = JSON.parse(localStorage.getItem("delList"));
      const newCate = category.map((category) => {
        // 针对每个分类，都返回一个拥有原来全部属性，并多了一个 postList 的对象
        // 组成一个新数组
        // 页码,每页长度
        return {
          ...category,
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      // 处理分类的逻辑分离出来
      // 添加多一个箭头
      newCate.push({
        name: "Ⅴ",
      });
      this.cateList = newCate;
      // console.log(this.cateList);
      // 获取完分类栏目数据，才能第一次获取文章列表
      // 不然无法拿到id
      this.loadPost();
    } else {
      this.$axios({
        method: "get",
        url: "/category",
      }).then((res) => {
        // this.cateList = res.data.data;
        // console.log(res.data.data);
        // 原来有的数据都要，同时在这个基础上各添加一个数组管理文章
        const newCate = res.data.data.map((category) => {
          // 针对每个分类，都返回一个拥有原来全部属性，并多了一个 postList 的对象
          // 组成一个新数组
          // 页码,每页长度
          return {
            ...category,
            postList: [],
            pageIndex: 1,
            pageSize: 6,
            loading: false,
            finished: false,
          };
        });
        // 处理分类的逻辑分离出来
        // 添加多一个箭头
        newCate.push({
          name: "Ⅴ",
        });
        this.cateList = newCate;
        // console.log(this.cateList);
        // 获取完分类栏目数据，才能第一次获取文章列表
        // 不然无法拿到id
        this.loadPost();
      });
    }
  },
  // 监听分类栏目
  watch: {
    activeCateIndex() {
      // 最后一个分类箭头事件,不是发请求获得文章,是跳转页面
      if (this.activeCateIndex == this.cateList.length - 1) {
        this.$router.push("/manage");
        return;
      }

      // 优化  只有当前激活分类本身 postList 为空.才发起请求,,有文章则不发请求
      if (this.cateList[this.activeCateIndex].postList.length == 0) {
        this.loadPost();
      }
    },
  },
  methods: {
    loadMorePost() {
      // 加载下一页
      // 1.当前激活分类的页码加1
      this.cateList[this.activeCateIndex].pageIndex += 1;
      //  2. 发请求
      this.loadPost();
    },
    // 封装加载文章数据
    loadPost() {
      // console.log(this.cateList[this.activeCateIndex].id);
      this.$axios({
        url: "/post",
        params: {
          // 当前激活分类 = 从分类数组中，拿出当前激活索引项
          // 就是当前激活分类数据，其中可以拿到id
          category: this.cateList[this.activeCateIndex].id,
          pageIndex: this.cateList[this.activeCateIndex].pageIndex,
          pageSize: this.cateList[this.activeCateIndex].pageSize,
        },
      }).then((res) => {
        // console.log(res.data);
        // 每个文章都有自己的文章数组
        // 之前获取的文章,会替换原来的文章列表
        // this.cateList[this.activeCateIndex].postList = res.data.data;
        // 不应该直接赋值,应该在后面补上
        this.cateList[this.activeCateIndex].postList = [
          ...this.cateList[this.activeCateIndex].postList,
          ...res.data.data,
        ];
        // 加载完毕loading改为false
        this.cateList[this.activeCateIndex].loading = false;
        // 如果获取的数据长度小于设定的小,说明是最后一页,将当期分类 finished 设为 true
        if (
          res.data.data.length < this.cateList[this.activeCateIndex].pageSize
        ) {
          this.cateList[this.activeCateIndex].finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab__text {
  color: pink;
}
/deep/ .van-tab:nth-last-child(2) {
  background-color: #fff;
  position: sticky;
  width: 44px;
  line-height: 44px;
  right: -8px;
}
</style>